<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>jQuery Expander Plugin</title>
  <link rel="stylesheet" media="screen" href="../../jq.css" />
  <link rel="stylesheet" media="screen" href="/shared/tabs.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="/lib/jquery.js"%3E%3C/script%3E'));</script>

  <script src="/shared/chili-1.8.js"></script>
  <script src="../jquery.expander.js"></script>

<script>
$(document).ready(function() {
  var opts = {collapseTimer: 4000};

  $.each(['beforeExpand', 'afterExpand', 'onCollapse'], function(i, callback) {
    opts[callback] = function(byUser) {
      var by, msg = '<div class="success">' + callback;

      if (callback == 'onCollapse') {
        msg += ' (' + (byUser ? 'user' : 'timer') + ')';
      }
      msg += '</div>';

      $(this).parent().parent().append(msg)
    }
  });

  $('dl.expander dd').eq(0).expander();
  $('dl.expander dd').slice(1).expander(opts);


  $('ul.expander li').expander({
    slicePoint: 50,
    widow: 2,
    expandSpeed: 0,
    userCollapseText: '[^]'
  });

  $('div.expander').expander();
});

</script>
<style media="screen">
  .test {
    background: #ffd;
  }
</style>
</head>

<body>
  <div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>
  <h1 id="banner"><a id="backnav" href="..">&lsaquo;&lsaquo; home</a>jQuery Expander Plugin</h1>
  <div id="main">
    <ul id="nav" class="anchors">
      <li><a href="../index.html#getting-started">Overview</a></li>
      <li class="tabs-selected"><a href="index.html">Demo</a></li>
      <li><a href="../index.html#options">API / Options</a></li>
      <li><a href="../index.html#download">Download &amp; Support</a></li>
    </ul>
      <div id="getting-started" class="tabContent">
        <div id="example1">
          <h2>Example 1</h2>
          <p>The following definition list has two expanders assigned to it, one for the first answer and one for the other two. The second expander has a number of options set for it, including three "callbacks" which invoke functions at three separate moments. </p>
<pre><code class="mix">$(document).ready(function() {
  $('dl.expander dd:eq(0)').expander();

  $('dl.expander dd:gt(0)').expander({
    collapseTimer: 4000,
    beforeExpand: function() {
      $(this).parent().parent().append('&lt;div class="success"&gt;before expand.&lt;/div&gt;');
    },
    afterExpand: function() {
      $(this).parent().parent().append('&lt;div class="success"&gt;after expand.&lt;/div&gt;');
    },
    onCollapse: function(byUser) {
      var by = byUser ? 'user' : 'timer';
      $(this).parent().parent().append('&lt;div class="success"&gt;on collapse (' + by + ').&lt;/div&gt;');
    }
  });
});</code></pre>
          <dl class="expander">
            <dt><strong>Benedick's Question</strong>: I pray you, what is he?</dt>
            <dd><strong>Beatrice's Answer</strong>: Why, <i>he</i> is the prince's jester: <b><i class="test">a very dull fool; only <a href="#" class="foo">his</a> gift is in devising impossible slanders</i>: none but libertines delight in him</b>; and the commendation is not in his wit, but in his villany; for he both pleases men and angers them, and then they laugh at him and beat him. I am sure he is in the fleet: I would he had boarded me. (<a href="http://shakespeare.mit.edu/much_ado/much_ado.2.1.html"><i>Much Ado About Nothing</i>, II.1</a>)
            </dd>

            <dt><strong>Benedick's Question</strong>: I do love nothing in the world so well as you: is not that strange?</dt>
            <dd><strong>Beatrice's Answer</strong>: As strange as the thing I know not. It were as possible for me to say I loved nothing so well as you: but believe me not; and yet I lie not; I confess nothing, nor I deny nothing. (<a href="http://shakespeare.mit.edu/much_ado/much_ado.4.1.html"><i>Much Ado About Nothing</i>, IV.1</a>)
            </dd>
            <dt><strong>Karl's Question</strong>: Why aren't you using another question from <i>Much Ado About Nothing</i> here?</dt>
            <dd><strong>Karl's Answer</strong>: Because I'm lazy. And besides, this demo is getting a little too pretentious.</dd>
          </dl>
          <hr />
          <p>Note that the third answer does not have a "read more" link because it's using the default value of 100 characters and 4 "widow" words as its cut-off. No sense in linking to read more when there isn't much more to read.</p>
        </div>

        <div id="example2">
          <h2>Example 2</h2>
          <p>The following list items have a single expander assigned to them with a few custom options set.</p>
<pre><code class="mix">$('ul.expander li').expander({
  slicePoint: 50,
  widow: 2,
  expandEffect: 'show',
  userCollapseText: '[^]'
});</code></pre>

          <ul class="expander">
            <li>Run a marathon <span class="read-more"><a href="#">[...]</a></span><span class="details">and qualify for Boston.</span></li>
            <li>Climb Mount Everest, or at least Mount Pleasant, and take some pictures while I'm there.</li>
            <li>Become proficient at the pogo stick.</li>
          </ul>
          <p>Hey, why is the first <code>&lt;li&gt;</code> collapsed? Well, the first list item is a trick! Rather than let the plugin decide where to truncate the text, I put the links and the span directly in the HTML. It looks like this:</p>
          <pre><code class="xml">&lt;li&gt;Run a marathon &lt;span class="read-more"&gt;&lt;a href="#"&gt;[...]&lt;/a&gt;&lt;/span&gt;&lt;span class="details"&gt;and qualify for Boston.&lt;/span&gt;&lt;/li&gt;</code></pre>
        </div> <!-- end example 2 -->

        <div id="example3">
          <h2>Example 3</h2>
          <p>The Expander Plugin now works for block-level elements, too.</p>
<pre><code class="mix">$('div.expander').expander();</code></pre>

          <div class="expander">
            <p>Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
            <p>Paragraph 2: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>

        </div> <!-- end example 3 -->
      </div>
    </div>
</body>
</html>
